<template>
    <div class="outer">
        <div class="inner">
<!--            头部-->
            <div class="header">
                <div class="header_title">发布作品征集</div>
                <div class="header_content">提供标题、人物、账号、IP等需求，征集平台认证编剧的创作作品</div>
                <div class="header_who" v-if="state.is_Ding_xiang">定向约稿：{{state.author}}</div>
            </div>
<!--征稿标题-->
            <div class="biaoti each_line">
                <div class="left_title">
                    <div class="xingxing">*</div>
                    &nbsp;
                    <div class="biaoti_text"> 征稿标题：</div>
                </div>
                <div class="right_input">
                    <el-input v-model="state.myTitle" placeholder="请输入10-20征稿需求描述" class="input_out_line"/>
                </div>
            </div>
<!--征稿分类-->
            <div class="fenlei each_line">
                <div class="left_title fenlei_biaoti">
                    <div class="xingxing">*</div>
                    &nbsp;
                    <div class="biaoti_text"> 征稿分类：</div>
                </div>
                <div class="right_input fenlei_outer">

                    <div class="fenlei_inner">

                        <!--                    数据循环部分 -->
                        <div class="outer_item" v-for="outerItem in state.fenLeiList" :key="outerItem.creationTypeModel.id">
                            <div class="outer_item_title">
                                {{outerItem.creationTypeModel.creationTypeName}}:
                            </div>
                            <div class="inner_item" ref="inner_item">
                                <el-checkbox v-model="state.myFenLeiChecked" :label="innerItem.id" class="inner_item_each" v-for="innerItem in outerItem.creationTypeModels" :key="innerItem.id">{{innerItem.creationTypeName}}</el-checkbox>
                            </div>
                        </div>


                    </div>


                </div>
            </div>
<!--对标账号-->
            <div class="zhanghao each_line">
                <div class="zhanghao_title">对标账号：</div>
                <div class="zhanghao_input">
                    <el-input v-model="state.myToNumber" placeholder="账号名称（可不填）" />
                </div>
            </div>
            <div class="zhanghao_toast">有对标账号可快速获取征稿方案</div>

            <!--征集截至  缴纳定金-->
            <div class="jiezhi_and_dingjin">

                <div class="jiezhi">
                    <div class="jiezhi_content">
                        <div class="jiezhi_title">
                            <span class="xingxing">
                                *
                            </span>
                            <span class="jiezhi_title_text">
                                征集截止天数：
                            </span>
                        </div>
                        <div class="jiezhi_select" >

                            <el-input-number v-model="state.myJieZhiTime" :min="1" :max="30" @change="handleChange" class="jiezhi_select" placeholder="最长时间为30天"/>

                        </div>
                    </div>
                    <div class="jiezhi_toast">
                        建议延长有效期，便于收集更多稿件
                    </div>
                </div>


                <div class="dingjin">
                    <div class="dingjin_content">
                        <div class="dingjin_title">
                            <span class="xingxing">
                                *
                            </span>
                            <span class="dingjin_title_text">
                                单篇定金缴纳：
                            </span>
                        </div>
                        <div class="dingjin_input">
                            <el-input v-model="state.myDingJin" type="number"/>
                        </div>
                    </div>
                    <div class="dingjin_toast">单稿价高会收集更多稿件</div>
                </div>

            </div>

<!--            征稿需求详细描述-->
            <div class="zheng_gao_detail">
                <div class="zheng_gao_title">
                    <span class="xingxing">*</span>
                    <span class="zheng_gao_title_text">征稿需求详情描述:&nbsp;&nbsp;</span>
                </div>

                <div class="zheng_gao_content" ref='editor'>

                </div>

            </div>

            <div class="zheng_gao_toast">
                有对标账号可快速获取征稿方案
            </div>

            <div class="submit" @click="submit">
                提交
            </div>

        </div>
    </div>
</template>

<script>
    import { onMounted, onBeforeUnmount, ref, reactive,getCurrentInstance,} from 'vue';
    import {useRouter} from 'vue-router'
    import {useRoute} from 'vue-router'
    import WangEditor from 'wangeditor';
    import {CreationTypeListByTypeId,WorksCallupEdit} from "@/api/ScriptWriting";
    import { ElMessage } from 'element-plus'

    export default {
        name: "zuo_pin_fa_bu",
        setup() {
            const { proxy } = getCurrentInstance()
            const editor = ref();
            const router = useRouter()
            const route = useRoute()
            const state = reactive({
                html: '',
                text: '',
                fenLeiList:[],
                myFenLeiChecked:[],
                myTitle:'',
                myToNumber:'',
                myJieZhiTime:undefined,
                myDingJin:undefined,
                is_Ding_xiang:false,
                author:'',
                authorId:undefined,
            });

            if(route.query.id == undefined){
                state.is_Ding_xiang=false
            }else{
                state.is_Ding_xiang=true
                state.author=route.query.author
                state.authorId=route.query.id
            }

            let instance;
            let this_ = this
            onMounted(() => {

                // 创建富文本
                instance = new WangEditor(editor.value);
                Object.assign(instance.config, {
                    onchange() {
                        state.html = instance.txt.html();
                    },
                });
                instance.config.height = 347
                instance.config.placeholder='内容要求：（征稿剧本的详细要求说明）<br> 现有账号：（如抖音快手等账号，没有请留空） <br>征稿字数：（单篇剧本的字数要求） <br>主演资料：（人物性格特征、风格、题材等） <br>助演资料：（同上） <br>参考对标账号：（如抖音快手等账号名称） <br>短视频时长：（30-60秒，或自定义时长）<br>拍摄环境：（场景，如家中、办公室、马路边等） <br>拍摄难度：（简单/一般/复杂，如果团队拍摄水平有限，可注明） <br>广告植入：（有或无，有请给出详细产品介绍） <br>相关附件：（文件、图片等资料，可提供下载链接） <br>其他补充：（越详细征得剧本匹配度越高，请用心填写）'
                instance.create();

                //获取列表数据
                // CreationTypeListByTypeId({typeid:proxy.$root.$route.query.creationTypeId}).then(res=>{
                //     console.log(proxy.$root.$route.query.creationTypeId)
                //     console.log('征集数据',res.data)
                //     state.fenLeiList=res.data
                // })

                CreationTypeListByTypeId({typeid:1}).then(res=>{
                    console.log(proxy.$root.$route.query.creationTypeId)
                    console.log('征集数据',res.data)
                    state.fenLeiList=res.data
                })

            });
            onBeforeUnmount(() => {
                instance.destroy();
                instance = null;
            });
            const syncHTML = () => {
                state.html = instance.txt.html();
            };

            const submit = () =>{
                let data
                if(state.authorId != undefined){
                    data={
                        title:state.myTitle,
                        // creationTypeId:proxy.$root.$route.query.creationTypeId,
                        creationTypeId:1,
                        classifyIds:state.myFenLeiChecked.join(','),
                        accountNumber:state.myToNumber,
                        deadlineDays:state.myJieZhiTime,
                        earnestMoney:state.myDingJin,
                        detailContent:state.html,
                        directionalUserId:state.authorId,
                    }
                }else{
                    data={
                        title:state.myTitle,
                        // creationTypeId:proxy.$root.$route.query.creationTypeId,
                        creationTypeId:1,
                        classifyIds:state.myFenLeiChecked.join(','),
                        accountNumber:state.myToNumber,
                        deadlineDays:state.myJieZhiTime,
                        earnestMoney:state.myDingJin,
                        detailContent:state.html
                    }
                }

                WorksCallupEdit(data).then(res=>{
                    console.log(res)
                    if(res.data = '操作成功'){
                        ElMessage({
                            message: '操作成功',
                            type: 'success',
                        })
                        router.replace('/dsp/zj')
                    }else{
                        ElMessage.error('操作失败')
                    }
                })

            }

            return {
                syncHTML,
                editor,
                state,
                submit,
                router,
                route,
            };
        },
    }
</script>

<style scoped lang="scss">
    .outer{
        width: 100%;
        overflow: hidden;
    }
    .inner{
        width: 1000px;
        background: #FFFFFF;
        margin: 0px auto;
        margin-top: 20px;
        overflow: hidden;
    }

    .xingxing{
        color: red;
    }

    .header{
        width: 100%;
        height: 110px;
        border-radius: 1px 1px 0px 0px;
        border-bottom: 1px solid #E5E5E5;
        margin-top: 22px;
        overflow: hidden;
    }
    .header_title{
        text-align: center;
        font-size: 20px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #111111;
        margin-top: 26px;
    }

    .header_content{
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        margin-top: 9px;
    }
    .header_who{
        text-align: center;
        font-size: 14px;
        line-height: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FF4444;
        margin-top: 14px;
    }
    .each_line{
        display: flex;
    }
    .left_title{
        width: 179px;
        display: flex;
        justify-content: end;
        align-items: center;
    }
    .right_input{
        width: 750px;
        overflow: hidden;
    }

    .input_out_line{
        border-color: #999999;
    }

    .biaoti{
        display: flex;
        margin-top: 48px;
    }

    .biaoti_text{
        font-size: 14px;
        line-height: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
    }

    .fenlei{
        margin-top: 30px;
    }
    .fenlei_biaoti{
        display: flex;
        justify-content: end;
        align-items:start;
        margin-top: 12px;
    }

    .fenlei_outer{
        width: 750px;
        min-height: 12px;
        background: #FFFFFF;
        border: 1px solid #D3D3D3;
        border-radius: 2px;


    }
    .fenlei_inner{
        min-height: 12px;
        margin-top: 28px;
        margin-right: 20px;
        margin-bottom: 28px;
        margin-left: 23px;
    }
    .outer_item{
        width: 707px;
        display: flex;
        margin-top: 25px;
    }
    .inner_item{
        width: 629px;
        display: flex;
        flex-wrap: wrap;
        margin-left: 13px;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .inner_item_each{
        height: 12px;
        margin-right: 0px;
        display: flex;
    }
    .inner_item_each{
        /deep/.el-checkbox__label{
            padding-left: 7px;
            /*width: 75px;*/
            background: #FFFFFF;
        }


    }

    .inner_item_each>span:nth-of-type(2){
        padding: 0px;
        /*margin-left: -10px;*/
        text-align: left;
    }


    .outer_item_title{
        width: 65px;
        height: 12px;
        font-size: 12px;
        line-height: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;


    /*    文字溢出省略号*/
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;


    }
    .zhanghao{
        margin-top: 28px;
    }
    .zhanghao_title{
        font-size: 14px;
        line-height: 36px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        margin-left: 109px;
    }
    .zhanghao_input{
        width: 752px;
        height: 36px;
    }
    .zhanghao_toast{
        margin-left: 180px;
        margin-top: 9px;
        font-size: 10px;
        line-height: 10px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
    }
    .jiezhi_and_dingjin{
        display: flex;
        margin-top: 30px;
        justify-content: space-between;
    }
    .jiezhi{
        margin-left: 70px;
    }
    .jiezhi_content{
        display: flex;
    }
    .jiezhi_title span{
        line-height: 36px;
    }
    .jiezhi_title_text{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
    }
    .jiezhi_select{
        width: 292px;
        height: 36px;
        border-radius: 2px;
        margin-left: -2px;
    }
    .jiezhi_toast{
        font-size: 10px;
        line-height: 10px;
        margin-top: 9px;
        margin-left: 112px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
    }

    .dingjin{

    }
    .dingjin_content{
        display: flex;
    }
    .dingjin_title span{
        line-height: 36px;
    }
    .dingjin_title_text{
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
    }
    .dingjin_input{
        width: 292px;
        height: 36px;
        background: #FFFFFF;
        border-radius: 2px;
        margin-right: 70px;
    }
    .dingjin_toast{
        font-size: 10px;
        line-height: 10px;
        margin-top: 9px;
        margin-left: 111px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
    }

    .zheng_gao_detail{
        display: flex;
        margin-top: 30px;
    }
    .zheng_gao_title{
        margin-left: 45px;
    }
    .zheng_gao_title_text{
        font-size: 14px;
        line-height: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
    }
    .zheng_gao_content{
        width: 752px;
        height: 427px;
        border: 1px solid #D3D3D3;
        border-radius: 2px;
    }
    .zheng_gao_toast{
        font-size: 10px;
        line-height: 10px;
        margin-left: 175px;
        margin-top: 9px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
    }
    .submit{
        width: 140px;
        height: 44px;
        background: #2EB0C6;
        border-radius: 4px;
        margin: 0px auto;

        font-size: 16px;
        line-height: 44px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        text-align: center;
        cursor: pointer;
        margin-top: 57px;
        margin-bottom: 48px;

    }

</style>
